<template>
  <div class="signup_container">
    <div class="signup_box">
      <!-- 注册头像区域-->
      <div class="avatar_box">
        <el-row>
          <el-col :span="12">
            <div class="span_box_1">
              <span class="title_style">注册</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="span_box_2">
              <img 
                class="image_style"
                src="../assets/images/crossing.png"
                alt="">
              </div>
          </el-col>
        </el-row>
      </div>
      <!-- 注册表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="120px"
        :model="formLabelAlign"
        class="login_form"
        id="setFont"
        :rules="signRules"
        ref="formLabelAlign"
      >
        <el-form-item label="手机号码">
          <el-input
            class="el-input_inner"
            v-model="formLabelAlign.phonenumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input 
            class="el-input_inner"
            v-model="formLabelAlign.nickname"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            class="el-input_inner"
            v-model="formLabelAlign.password"
            :key="passwordType"
            ref="password"
            name="password"
            tabindex="2"
            autocomplete="on"
            :type="passwordType"
            @blur="capsTooltip = false"
            @keyup.enter.native="submitForm"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            class="el-input_inner"
            v-model="formLabelAlign.password1"
            :key="passwordType"
            ref="repassword"
            name="repassword"
            tabindex="2"
            autocomplete="on"
            :type="passwordType"
            @blur="capsTooltip = false"
            @keyup.enter.native="submitForm"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="12">
              <el-input v-model="formLabelAlign.vcode" clearable></el-input>
            </el-col>
            <el-col :span="4">
              <el-button class="messagebutton_style" @click="sendCode()"
                >发送验证码</el-button></el-col>
          </el-row>
        </el-form-item>
        <div class="button_flex">
        <el-form-item class="btns_center">
          <el-button class="finishbutton_style" @click="submitForm()"
            >完成</el-button>
        </el-form-item>
        <el-form-item class="btns_right">
          <el-button
            class="text_click"
            type="text"
            @click="mima">已有账号去登录>></el-button>
        </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { postSignup, getSendcode} from "crm/login/login.js";
export default {
  data() {
    //定义输入密码，确认密码的验证
    var validatePass = (rule, value, callback) => {
            if (value === '') {
                    callback(new Error('请输入密码'));
            } else {
                    if (this.formLabelAlign.repassword !== '') {
                        this.$refs.formLabelAlign.validateField('checkPass');
                    }
                    callback();
                }
            };
    var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formLabelAlign.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
    return {
      labelPosition: 'left',
      formLabelAlign: {
        nickname: "",
        phonenumber: "",
        password: "",
        password1: "",
        vcode: "",
      },
      passwordType: 'password',
      capsTooltip: false,  
      //注册的规则
      signRules: {
        username: [
          {required: true, trigger: 'change' },
          {min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}
        ],
        password: [
          { required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
          { validator: validatePass, trigger: 'blur' }
        ],
        repassword: [
          {required: true, trigger: 'change' },
          {min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'},
           { validator: validatePass2, trigger: 'blur'}
        ]
      },
    };
  },
  methods: {
    mima() {
      this.$router.push("/Login_1");
    },
    sendCode() {
      let payload = {};
      payload.phonenum = this.formLabelAlign.phonenumber;
      getSendcode(payload)
        .then((res) => {
          if (res.data.status !== "OK") {
            alert("验证码请求失败");
            return;
          } else if (res.data.status == "OK") {
            alert("验证码请求成功！");
            console.log(res.data.phonenum);
            localStorage.setItem("userid", res.data.data.userid);
            // localStorage.setItem("token", res.data.token);
          }
        })
        .catch((err) => {});
    },
    submitForm() {
      //前端判断输入是否规范

      let payload = {};
      payload.nickname = this.formLabelAlign.nickname;
      payload.phonenumber = this.formLabelAlign.phonenumber;
      payload.password = this.formLabelAlign.password;
      payload.vcode = this.formLabelAlign.vcode;
      postSignup(payload)
        .then((res) => {
          if (res.data.status == "Error") {
            alert("注册失败");
            return;
          } else if (res.data.status == "OK") {
            alert("注册成功！");
            localStorage.setItem("userid", res.data.userid);
            // localStorage.setItem("token", res.data.token);
            this.$router.push("/Login_1");
          }
        })
        .catch((err) => {})
      // }
      // });
    },
  },
}
</script>

<style scoped>
.signup_container{
  background-color: #333;
  height: 100%;
}
.signup_box{
  background-color: #1E1E1E;
  width: 500px;
  height: 550px; 
  border-radius: 18px;
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
}
.avatar_box{
  background-color: #AEAEAE;
  width: 500px;
  height: 60px;
  border-radius: 18px 18px 0px 0px;
  position: absolute;
}
.span_box_1{
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 6px 8px 8px 17px;
}
.span_box_2{
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 8px 12px 2px 70px;
}
.title_style{
  height: 100%;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 36px;
}
.image_style{
  width: 19%;
  height: 20%;
  padding: 5% 5%;
  float: right;
}
/*.text_note{
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 35px;
}*/
#setFont >>> .el-form-item__label {
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 20px;
  position: relative;
  left: 8%;
}
/deep/.el-input__inner {
  background-color: #282828;
  border: 0;
  width: 85%;
  position: relative;
}
.messagebutton_style{
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  background-color: #111111;
  font-size: 15px;
}
.finishbutton_style{
  height: 50px;
  width: 100px;
  margin: 0%;
  border-width: 0px;
  padding: 0%;
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  background-color: #AEAEAE;
  font-size: 35px;
}
.text_click{
  font-family: 'Youshebiaotihei';
  color:#EEEEEE;
  font-size: 15px;
}
.btns_center{
  /* justify-content: center; */
  display: flex;
  position: absolute;
  left: 15%;
}
.button_flex{
  display: flex;
  flex-direction: column;
}
.btns_right{
  /* justify-content: right; */
  display: flex;
  position: absolute;
  top: 85%;
  right: 20%;
}
.login_form{
  position: absolute;
  top: 18%;
  bottom: 0;
  width: 100%;
  padding: 0  50px;
  box-sizing: border-box; /* 巧妙 */
}
/* .icon{
    display: inline-block;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 24%;
    left: 220px;
    z-index: 2;
    color: #333;
} */
</style>